<template>
  <div class="split">
    <ul class="flex gap-x-4" :class="[`style-${stageConfig.split}`]">
      <li
        v-for="(item, key) in stageConfig.subs"
        :key="key"
        class="justify-center items-center flex relative"
        :class="[{ active: item.alias === currentStage.alias }]"
        @click="selectItem(item)"
      >
        {{ item.alias }}
        <div class="dropdown">
          <a-dropdown>
            <div>
              {{ t('操作') }}
              <DownOutlined />
            </div>
            <template #overlay>
              <div style="width: 84px">
                <a-button @click="copy(item)">{{ t('复制') }}</a-button>
                <a-button v-if="copyScreen" @click="paste">{{ t('粘贴') }}</a-button>
              </div>
            </template>
          </a-dropdown>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useCloned } from '@vueuse/core';
import { currentStage, updateStage, stageConfig } from '../../../data/stage';
import { copyScreen } from '../../../layout/bus';
import type { IStage } from '../../../types/IStage';
import { message } from 'ant-design-vue';

const { t } = useI18n();
const selectItem = (item: IStage) => {
  currentStage.value.subs = [];
  currentStage.value = item;
  updateStage.value += 1;
};

const copy = (item: IStage) => {
  copyScreen.value = useCloned(item.components).cloned.value;
  message.success('success');
};
const paste = () => {
  if (copyScreen.value) {
    currentStage.value.components = copyScreen.value;
  }
};
</script>

<style lang="scss" scoped>
.split {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  $hh: 84px;

  ul {
    display: grid;
    gap: 12px;
    li {
      width: $hh;
      height: $hh;
      border-radius: 4px;
      background-color: #f8f8f8;

      cursor: pointer;
      text-transform: uppercase;
      &:hover {
        .dropdown {
          opacity: 1;
        }
      }
    }

    .active {
      color: white;
      background: var(--primary);
    }
  }

  .style-1 {
    grid-template-columns: 1fr 1fr;
  }
}

.dropdown {
  background-color: none;
  position: absolute;
  bottom: 0;
  width: 84px;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
  cursor: pointer;
  opacity: 0;
  z-index: 5;
}
</style>
